<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../cssmui/mui.min.css" rel="stylesheet" />

		<script src="../../hyl/mui/mui.js"></script>
		<!-- 			<link href="../../cssmui/mui.picker.min.css" rel="stylesheet" />
		<script src="../../mui/mui.picker.min.js"></script> -->
		<!--	<link href="../../css/mylist.css" rel="stylesheet" />-->
		<script src="../../js/vue.min2.6.10.js"></script>
		<script src="../../dbm/designsql.js"></script>
		<script src="../../hyl/util/core.js"></script>
		<script src="../../hyl/plus/file.js"></script>
		<script src="../../hyl/plus/sqlite.web.js"></script>
		<script src="../../hyl/plus/storage.js"></script>
		<script src="../../hyl/md/sql-modeldata.js"></script>
		<script src="../../hyl/mui/vue-mui-ext.js"></script>
		<script src="../dao/my_conf_dao.js"></script>
		<style type="text/css">
			.mui-bar-popover {
				width: 30%;
			}

			.list-img {
				margin-right: 10px;
				width: 60px;
				height: 60px;
			}

			.list-row {
				height: 80px;
			}

			.list-row-selected {
				background-color: lemonchiffon;
			}

			.mui-pull-right {
				margin: 6px
			}

			#topPopover {
				position: fixed;
				top: 45px;
				right: 6px;
				background-color: #DDFFDD;
			}

			#topPopover .mui-popover-arrow {
				left: auto;
				right: 6px;
			}

			.mui-popover-arrow {
				display: none;
			}
			.btn-mini {
				width: 20px;
				height: 20px;
				padding: 0px;
			}
		</style>

	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-back mui-pull-left"></a>
			<a href="#topPopover" class="mui-action-menu mui-icon mui-icon-bars mui-pull-right"></a>
			<h1 id="headertitle1" class="mui-title">分类</h1>
		</header>

		<div class="mui-content" id="el" v-cloak>
			<form class="mui-input-group">
				<div class="mui-table-view">
					<div class=" mui-input-row li_item">
						<label class="mui-table-cell mui-col-sm-3 mui-col-xs-3 li_item_label">编号</label>
						<div class="mui-table-cell mui-col-sm-9 mui-col-xs-9">
							<input id="value1" type="number" v-bind:readonly="isReadOnly" v-model="formdata.value" placeholder="">
						</div>
					</div>
					<div class=" mui-input-row li_item">
						<label class="mui-table-cell mui-col-sm-3 mui-col-xs-3 li_item_label">名称</label>
						<div class="mui-table-cell mui-col-sm-9 mui-col-xs-9">
							<input id="text1" type="text" v-model="formdata.text" class="mui-input-clear" placeholder="必填，手输">
						</div>
					</div>
					<div class=" mui-input-range mui-row li_item">
						<div class="mui-table-cell mui-col-sm-12 mui-col-xs-12">
							<textarea id="note1" rows="2" v-model="formdata.t" class="ptext" style="margin:0px" placeholder="填写说明"></textarea>
						</div>
					</div>

					<div class="mui-input-row li_item">
						<label class="mui-table-cell mui-col-sm-3 mui-col-xs-3 li_item_label">状态</label>
						<div class="mui-table-cell mui-col-sm-9 mui-col-xs-9">
							<!-- ref="switch"   -->
							<mui-switch v-model="formdata.s"></mui-switch>
						</div>
					</div>
					<div class=" mui-row mybtns" style="margin:10px;padding:10px">
						<span @tap="onNew" class="mui-btn mui-btn-blue ">新增</span>
						<span @tap="onSave" class="mui-btn mui-pull-right mui-btn-blue ">保存</span>
					</div>
				</div>
			</form>
			<div class="mui-table-view ">
				<div class="mui-table-view-cell mui-row mui-bar">
					<span class="mui-col-sm-2 mui-col-xs-2  ">编号</span>
					<span class="mui-col-sm-7 mui-col-xs-7  ">名称 </span>
					<span class="mui-col-sm-3 mui-col-xs-3  ">状态 </span>
				</div>
				<div class="mytablebody">
					<div class="mui-table-view-cell mui-row movebtns " v-for="(rc, index) in list" @tap="onShow(index,rc)">
						<span class="mui-col-sm-2 mui-col-xs-2  ">{{rc.value }}</span>
						<span class="mui-col-sm-7 mui-col-xs-7  "> {{rc.text }}</span>
						<span class="mui-col-sm-3 mui-col-xs-3  ">
							<button class="btn-mini" @tap.stop="onUp(index,rc)">↑</button>
							{{rc.s ? '有效' : '失效'}}
							<button class="btn-mini" @tap.stop="onDown(index,rc)">↓</button></span>
					</div>
				</div>
			</div>
			<!--右上角弹出菜单-->
			<div id="topPopover" class="mui-popover">
				<p class=" mui-h4">选择分类</p>
				<ul class="mui-table-view">
					<li class="mui-table-view-cell" v-for="(value, key)  in dict">
						<a @tap="onTypeSelected(key)">{{value}}</a>
					</li>
				</ul>
			</div>
		</div>
		<script src="../../hyl/page-muiIni.js"></script>

		<script type="text/javascript">
			var Dao = new my_conf_dao(_mydb_);

			var templist = [{
				"py": "kf",
				"text": "口服",
				"value": "1",
				"s": false
			}, {
				"py": "yb",
				"text": "眼部",
				"value": "2",
				"s": false
			}, {
				"py": "zc",
				"text": "嘴唇",
				"value": "3",
				"s": false
			}, {
				"py": "xh",
				"text": "洗护",
				"value": "4",
				"s": false
			}, {
				"py": "lb",
				"text": "脸部",
				"value": "5",
				"s": false
			}, {
				"py": "hf",
				"text": "护肤",
				"value": "6",
				"s": false
			}, {
				"py": "mj",
				"text": "美甲",
				"value": "7",
				"s": false
			}];

			var TYPENAME = '';
			var vuedata = {
				data: {
					formdata: Dao.getNewObj(),
					isReadOnly: false,
					list: null,
					dict: {
						gclass: '产品分类',
						usign: '用户标签',
						ulevel: '用户等级'
					},

				},
				//定义内部方法
				methods: {
					saveDict(list) {
						var obj = {
							"k": TYPENAME,
							"v": JSON.stringify(list)
						};
						Dao.setDict(TYPENAME, obj);
					},
					setHeader(k) {
						TYPENAME = k;
						document.getElementById('headertitle1').innerHTML = this.dict[k];
					},

					onTypeSelected(k) {
						this.setHeader(k);
						var ta = this;
						Dao.getDict(TYPENAME, function(rc) {
							ta.list = rc;
							ta.onNew();
							mui('#topPopover').popover('hide')
						}, function(e) {
							ta.list = null
							ta.onNew();
							mui('#topPopover').popover('hide')
						});
					},
					onShow(index, item) {
						this.formdata = item;
						this.isReadOnly = true;
						//	console.log("show", JSON.stringify(this.formdata))
					},
					onUp(index, item) {
						if (index > 0) {
							_Fun.a.change(this.list, index - 1, index);
							this.$forceUpdate()
							this.saveDict(this.list);
						}
					},
					onDown(index, item) {
						if (index < this.list.length - 1) {
							_Fun.a.change(this.list, index + 1, index);
							this.$forceUpdate()
							this.saveDict(this.list);
						}
					},
					onNew: function() {
						this.formdata = Dao.getNewObj();
						this.isReadOnly = false;
					},
					onSave() {
						//console.log('onSave',this.formdata.value,this.list)
						if (!_IS.checkNumber(this.formdata.value)) return;
						var f = true;
						if (this.list) {
							for (var i = 0; i < this.list.length; i++) {
								if (this.list[i].value == this.formdata.value) {
									if (this.isReadOnly) {
										_Fun.m.assign(this.list[i], this.formdata);
										f = false;
										break;
									} else {
										alert("该编号已经存在,请重新设置编号");
										return;
									}
								}
							}
						} else {
							this.list = [];
						}
						if (f)
							this.list.push(this.formdata);
						this.$forceUpdate();
						this.isReadOnly = true;
						this.saveDict(this.list);
						app._result.code = 1;
						app._result.msg = _Fun.a.put(app._result.msg, TYPENAME);
						mui.toast("完成", {
							duration: 500,
							type: 'div'
						});
						//	console.log("app._result.data",app._result.data);
					}
				},
				//计算属性
				computed: {}, //监听器
				watch: {},
				//数据,事件已经初始化,el未绑定,dom未渲染
				beforeCreate: function() {},
				created: function() {},
				//el已绑定 dom已渲染							
				mounted: function() {}
			}
			//--------------初始化------------------
			function afterPlusReady() {
				//console.log(this.TYPENAME)
				var vm = new Vue(vuedata);
				TYPENAME = app._request || 'gclass';
				vm.setHeader(TYPENAME);
				/* 				if (TYPENAME=='gclass'){
									vm.list = templist;					
									vm.saveDict(templist);
									vm.$mount('#el'); 
									return;
								}	 */
				Dao.getDict(TYPENAME, function(rc) {
					vm.list = rc;
					//测试用例							
					console.log('vm.list', vm.list)
					vm.$mount('#el');
				});



			}
		</script>
	</body>

</html>
<script src="../../hyl/pageStart.js"></script>
